<template>
  <el-select v-model="departmentId" placeholder="请选择" :props="Tree" :treeData="departmentList">
    <el-option v-for="item in departmentList" :key="item.id" :label="item.name" :value="item.id" />
  </el-select>
</template>

<script lang="ts" setup>
import {
  computed,
  defineProps, getCurrentInstance, onMounted, ref, withDefaults,
} from 'vue';
import { hColgroup } from 'element-plus/es/components/table/src/h-helper';

const { proxy } = getCurrentInstance();
interface Tree {
  id:number;
  name: string;
  children?: Tree[];
}
// 获取父组件传递过来的值
interface Props {
  data?: Tree[],
}
const props = withDefaults(defineProps<Props>(), {
});
const departmentList = ref<Tree[]>();// 定义部门树形菜单
const getDepartmentTree = async () => { // 读取部门树形菜单
  const resData:any = await new proxy.$Request(proxy.$urls.API_URL_BACKSTAGE_SCHOOLDEPARTMENT_ALL_MANAGE).get();
  if (resData.success) {
    departmentList.value = resData.data;
    // console.log(`departmentList:${departmentList.value}`);
  }
};
onMounted(() => {
  getDepartmentTree();
});

if (typeof props.data === 'undefined') { // 如果没有值传进来
  onMounted(getDepartmentTree);
}

// 对部门属性进行监听
const departmentId = computed({
  get() { // 不能在get里面改变nodeName.value的值，所以在watch里面进行修改
    // nodeName.value=treeRef.value.getNode(props.modelValue).data["name"];
    return props.data;
  },
  set(val) {
    proxy.$emit('update:modelValue', val);// 则传递给父组件
  },
});
</script>

<style scoped>

</style>
